<template>
  <div
    class="canvas-bg"
    id="particles-js"
    :color="color"
    :particleOpacity="particleOpacity"
    :linesColor="linesColor"
    :particlesNumber="particlesNumber"
    :shapeType="shapeType"
    :particleSize="particleSize"
    :linesWidth="linesWidth"
    :lineLinked="lineLinked"
    :lineOpacity="lineOpacity"
    :linesDistance="linesDistance"
    :moveSpeed="moveSpeed"
    :hoverEffect="hoverEffect"
    :hoverMode="hoverMode"
    :clickEffect="clickEffect"
    :clickMode="clickMode"
  ></div>
</template>

<script setup>
import { onMounted } from 'vue'
require('particles.js')

const props = defineProps({
  backgroundColor: {
    type: String,
    default: '#909090'
  },
  color: {
    type: String,
    default: '#dedede'
  },
  particleOpacity: {
    type: Number,
    default: 0.7
  },
  particlesNumber: {
    type: Number,
    default: 80
  },
  shapeType: {
    type: String,
    default: 'circle'
  },
  particleSize: {
    type: Number,
    default: 4
  },
  linesColor: {
    type: String,
    default: '#dedede'
  },
  linesWidth: {
    type: Number,
    default: 1
  },
  lineLinked: {
    type: Boolean,
    default: true
  },
  lineOpacity: {
    type: Number,
    default: 0.4
  },
  linesDistance: {
    type: Number,
    default: 150
  },
  moveSpeed: {
    type: Number,
    default: 3
  },
  hoverEffect: {
    type: Boolean,
    default: true
  },
  hoverMode: {
    type: String,
    default: 'grab'
  },
  clickEffect: {
    type: Boolean,
    default: true
  },
  clickMode: {
    type: String,
    default: 'push'
  }
})

onMounted(() => {
  initParticleJS(props.color, props.particleOpacity, props.particlesNumber, props.shapeType, props.particleSize, props.linesColor, props.linesWidth, props.lineLinked, props.lineOpacity, props.linesDistance, props.moveSpeed, props.hoverEffect, props.hoverMode, props.clickEffect, props.clickMode)
})

function initParticleJS(color, particleOpacity, particlesNumber, shapeType, particleSize, linesColor, linesWidth, lineLinked, lineOpacity, linesDistance, moveSpeed, hoverEffect, hoverMode, clickEffect, clickMode) {
  particlesJS('particles-js', {
    particles: {
      number: {
        value: particlesNumber,
        density: {
          enable: true,
          value_area: 800
        }
      },
      color: {
        value: color
      },
      shape: {
        // circle, edge, triangle, polygon, star, image
        type: shapeType,
        stroke: {
          width: 0,
          color: '#192231'
        },
        polygon: {
          nb_sides: 5
        }
      },
      opacity: {
        value: particleOpacity,
        random: false,
        anim: {
          enable: false,
          speed: 1,
          opacity_min: 0.1,
          sync: false
        }
      },
      size: {
        value: particleSize,
        random: true,
        anim: {
          enable: false,
          speed: 40,
          size_min: 0.1,
          sync: false
        }
      },
      line_linked: {
        enable: lineLinked,
        distance: linesDistance,
        color: linesColor,
        opacity: lineOpacity,
        width: linesWidth
      },
      move: {
        enable: true,
        speed: moveSpeed,
        direction: 'none',
        random: false,
        straight: false,
        out_mode: 'out',
        bounce: false,
        attract: {
          enable: false,
          rotateX: 600,
          rotateY: 1200
        }
      }
    },
    interactivity: {
      detect_on: 'canvas',
      events: {
        onhover: {
          enable: hoverEffect,
          mode: hoverMode
        },
        onclick: {
          enable: clickEffect,
          mode: clickMode
        },
        onresize: {
          enable: true,
          density_auto: true,
          density_area: 400
        }
      },
      modes: {
        grab: {
          distance: 140,
          line_linked: {
            opacity: 1
          }
        },
        bubble: {
          distance: 400,
          size: 40,
          duration: 2,
          opacity: 8,
          speed: 3
        },
        repulse: {
          distance: 200,
          duration: 0.4
        },
        push: {
          particles_nb: 4
        },
        remove: {
          particles_nb: 2
        }
      }
    },
    retina_detect: true
  })
}
</script>

<style scoped>
.canvas-bg {
  position: absolute;
  z-index: -10;
  background-color: v-bind(backgroundColor);
  width: 100%;
  height: 100%;
}
</style>
